<template>
  <div class="app-container">
    <div class="zd3">
      <div class="zd3-title">
        <p>
          <span>借用人</span>
          <input v-model="search.borrowPerson" type="text" placeholder="请输入借用人" />
        </p>
        <el-button size="small" type="success" @click="getList">查询</el-button>
        <el-button size="small" @click="resetList">重置</el-button>
        <el-button size="small" type="primary" @click="addJieyong">新增</el-button>
        <el-button size="small" v-if="show" type="warning" @click="guihuan">归还</el-button>
      </div>
      <div class="zd3-btm">
        <!-- <div class="addDate" @click="addPeople">+ 新增成员</div> -->
        <el-table
          ref="singleTable"
          :data="tableData"
          v-loading="loading"
          highlight-current-row
          @current-change="handleAdd"
          style="width: 100%"
        >
          <el-table-column type="index" align="center" width="50" label="序号" fixed="left" />

          <el-table-column align="center" width="100" prop="status" label="状态" fixed="left">
            <template slot-scope="scope">
              <div
                class="status"
                :class="scope.row.status == '借用' ? 'blue': scope.row.status == '已归还' ? 'green'  : 'red'"
              >{{scope.row.status}}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="borrowNumber"
            width="100"
            label="借用单号"
            fixed="left"
          />
          <el-table-column align="center" prop="borrowTime" label="借用时间" />
          <el-table-column align="center" prop="borrowPerson" label="借用人" />
          <el-table-column align="center" prop="predictReturnTime" width="150" label="预计归还时间" />
          <el-table-column align="center" prop="returnTime" label="归还时间" />
          <el-table-column align="center" width="150" label="资产明细">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.putList" :key="index" class="godetail" @click="goDetail(item)">{{item.propertyName}}{{index == (scope.row.putList.length - 1) ? '' : ' / '}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="baofei" label="作废人" /> -->
          <el-table-column align="center" width="100" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="look(scope.row, scope.$index)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          align="right"
          layout="prev, pager, next"
          :page-size="50"
          :total="total"
          @current-change="goPage"
          @prev-click="goPrev"
          @next-click="goNext"
        />
      </div>
    </div>

    <el-dialog title="新增归还" :visible.sync="addProShow" width="50%">
      <div class="product">
        <p>
          <span>实际归还时间</span>
          <el-date-picker
            v-model="tempData.returnTime"
            type="date"
            value-format="yyyy-MM-dd"
            class="userselect"
            placeholder="选择日期"
          ></el-date-picker>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="noxuanzhong">取 消</el-button>
        <el-button type="primary" @click="quedingguihuan">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updateRuku, rukuList, jieyongList, updateJieyong,updateJieyongNew } from "@/api/caigou";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      search: {
        currentPage: 1,
        borrowPerson: "",
      },
      show: false,
      addProShow: false,
      guihuanList: [],
      total: 1,
      multipleSelection: [],
      loading: true,
      tableData: [], //进货单
      dialogVisible: false,
      tempData: {
        returnTime: "", //实际归还时间
        status: "已归还",
        brid: "",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /**
     * 跳转资产详情
     */
    goDetail(data){
      console.log(data)
      this.$router.push({
        name: 'Zichanmingxi',
        params: {
          options: JSON.stringify(data)
        }
      })
    },
    // 获取进货单
    getList() {
      this.loading = true
      this.search.departments = this.$store.state.user.userInfo[0].departments
      jieyongList(this.search).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total
        this.loading = false;
      });
    },
    // 查看详情
    look(item, index) {
      console.log(item, index);
      this.$router.push({
        name: "Writejiechuguihuan",
        params: {
          options: JSON.stringify(item),
          look: true
        },
      });
    },
    handleAdd(row) {
      console.log(row);
      row.ischeck = false;
      row.num = 1;
      if (row.status == "借用") {
        this.show = true;
        this.guihuanList = row;
        console.log(this.guihuanList);
      } else {
        this.show = false;
      }
    },

    guihuan() {
      this.addProShow = true;
    },
    noxuanzhong() {
      this.addProShow = false;
    },
    /**
     * 确定归还
     */
    quedingguihuan() {
      this.tempData.brid = this.guihuanList.brid;
      this.tempData.putList = this.guihuanList.putList.map(item => {
        delete item.propertyType
        item.status = '使用中'
        return item
      })
      console.log(this.tempData.brid);
      console.log(this.tempData);
      updateJieyongNew(this.tempData).then((res) => {
        console.log(res);
        this.$message({
          message: res.message,
          type: "success",
        });
      });
      // for (var i = 0; i < this.guihuanList.putList.length; i++) {
      //   console.log(this.guihuanList.putList[i].oid);
      //   var obj = {
      //     status: "闲置",
      //     oid: this.guihuanList.putList[i].oid,
      //   };
      //   console.log(obj);
      //   updateRuku(obj).then((res) => {
      //     console.log("-------------------");
      //     console.log(res);
      //   });
      // }
      this.getList();

      (this.addProShow = false), (this.show = false);
    },

    save(item) {},
    // 删除操作

    goPage(page) {
      this.search.currentPage = page;
      this.getList();
    },
    goPrev(page) {
      console.log(page);
      this.search.currentPage--;
      this.getList();
    },
    goNext(page) {
      this.search.currentPage++;
      this.getList();
      console.log(page);
    },
    resetList() {
      this.search = {
        currentPage: 1,
      };
    },
    // 新增入库单
    addJieyong(item) {
      this.$router.push({ name: "Writejiechuguihuan" });
    },
  },
};
</script>

<style lang="scss" scoped>
.godetail{
  font-size: 14px;
  color: #18A05E;
  cursor: pointer;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
}
.app-container {
  padding: 20px;
}

.zd3-title {
	height: 70px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	position: relative;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);

	> p {
		font-size: 14px;
		color: #333;
		margin-right: 20px;

		> span {
			padding-right: 20px;
		}

		> input {
			width: 150px;
			height: 32px;
			// background: #ccc;
			border-radius: 3px;
			border: 1px solid #ccc;
			padding-left: 10px;
			color: #333;
		}
	}

	> h3 {
		// width: 64px;
		height: 32px;
		background: #18a05e;
		border-radius: 3px;
		margin: 0 30px 0 0;
		padding: 0 15px;
		color: #fff;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
	}

	> h4 {
		padding: 0 15px;
		height: 32px;
		border-radius: 3px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		color: #333;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
	}
}

.status {
  border-radius: 3px;
  font-size: 12px;
  width: 50px;
  color: #fff;
  background: #777777;
  margin: 0 auto;
}
.status-active {
  background: #18a05e;
}
.top {
  display: flex;
  background: #ffffff;
  padding-left: 20px;
}

.btns {
  display: flex;
  align-items: center;
  margin-left: 5px;
  background: #ffffff;
  padding-left: 20px;
  /*position: absolute;
	right: 20px;
	bottom: 5px;*/
  > h3 {
    width: 64px;
    height: 32px;
    background: #18a05e;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
    margin-left: 10px;
  }
}
.zd3 {
}
.red {
  background: #ff0000;
}
.green {
  background: #18a05e;
}
.yellow {
  background: #f8c419;
}
.blue {
  background: #078fff;
}

/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #18a05e;
  color: #fff;
}
.zd3-btm /deep/.btn-prev:after {
  content: "上一页";
}
.zd3-btm /deep/.btn-next:before {
  content: "下一页";
}
.zd3-btm /deep/.btn-prev,
.zd3-btm /deep/.btn-next {
  width: 65px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  overflow: hidden;
  /deep/.el-button--text[data-v-318d347c] {
    margin: 0 10px;
  }
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .el-pagination {
    white-space: nowrap;
    padding: 15px 5px;
    color: #303133;
    font-weight: bold;
  }

  .el-button--text {
    margin: 0 15px;
  }
}
.change {
  display: flex;
  flex-wrap: wrap;
  > p {
    width: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
</style>
